<script setup>
import { ref, reactive, provide } from 'vue';
import MyFather from './MyFather.vue';
let money = ref(100000000);
let number = ref(100);
let car = reactive({
  name: '奔驰',
  price: 1000000,
});
function changeNumber(n) {
  number.value += n
}
//使用provide函数提供数据,向后代,儿子，孙子...都可以提供数据
provide('m', money)
provide('c', car)

// 传递一个多个内容过去，一个是number，一个是changeNumber方法
// provide('numberText', { number: number, changeNumber: changeNumber })
//简写方式
provide('numberText', { number, changeNumber })
</script>
<template>
  <div class="myGrandpa">
    <h3>我是爷爷组件</h3>
    <h4>银子:{{ money }}</h4>
    <h4>一辆{{ car.name }}车子,价值:{{ car.price }}万</h4>
    <h4>车子的数量是:{{ number }}</h4>
    <MyFather />
  </div>
</template>
<style scoped>
.myGrandpa {
  background-color: #11bc30;
  padding: 10px;
  border: 1px solid rgb(176, 31, 123)
}
</style>